<template>
  <view class="page">
    <my-container :data="couponDetail" refresh @refresh="getMemberCouponDetail">
      <section class="is-flex-col">
        <view class="box">
          <my-row title="门店名称" :value="couponDetail.bname"></my-row>
          <my-row title="优惠券名称" :value="couponDetail.title"></my-row>
          <my-row title="过期时间" :value="couponDetail.limittime"></my-row>
          <my-row title="是否使用" :value="couponDetail.isUsed | isUsedType"></my-row>

          <view v-if="$format(couponDetail, 'qrcode')" class="is-flex justify-center mt-5 mb-5">
            <image :src="$utils.base64Img(couponDetail.qrcode)" style="width: 100px; margin: 20px" mode="widthFix"></image>
          </view>
        </view>
      </section>
    </my-container>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectCoupon: null,
      couponDetail: {
        id: 4561, //记录id
        limittime: '2021-04-07 16:46:28', //过期时间
        isUsed: 0, //是否使用（0 否 1 是）
        title: '80元代金券', //优惠券名称
        bid: '90', //门店id
        bname: '先动会所-v12', //门店名称
        qrcode: 'iVBORw...' //base64二维码
      }
    }
  },
  filters: {
    // 是否使用（0 否 1 是）
    isUsedType(val) {
      return val === 0 ? '否' : '已退款'
    }
  },
  onLoad(options) {
    const encodeOptions = this.$encode(options)
    this.selectCoupon = this.$format(encodeOptions, 'data')
  },
  onShow(options) {
    this.initLoginInfo().then(res => {
      this.getMemberCouponDetail()
    })
  },
  methods: {
    /**
     * 查询优惠券详情
     */
    getMemberCouponDetail() {
      const id = this.$format(this.selectCoupon, 'id')
      if (!id) return
      const baseParam = this.getBase(['token', 'usertoken', 'selectuniacid'])
      if (!baseParam) return
      console.param('查询优惠券详情', baseParam)
      Object.assign(baseParam, { id })
      this.$api
        .getMemberCouponDetail(baseParam)
        .then(res => {
          console.res('查询优惠券详情', res)
          this.couponDetail = this.$format(res, 'data')
        })
        .catch(err => {
          console.err('查询优惠券详情', err)
          this.errMsg(err, '查询优惠券详情失败')
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.box {
  background: $color-primary-modal-bg;
  padding: 10px 0;
  ::v-deep .row {
    padding: 10px 15px;
    .title {
      color: $color-primary-grey-text;
    }
    .value {
      color: $white;
    }
  }
  .item {
    border-bottom: 10px solid $color-primary-bg;
    &:last-child {
      border-bottom: 0;
    }
  }
}

// 订单明细
.detail-box {
  background: $color-primary-modal-bg;
  .item {
    display: flex;
    justify-content: space-between;
    padding: 5px 15px;
  }
  // .item:odd {}
  .item:nth-child(even) {
    background: $color-primary-bg;
  }
}
</style>
